<template>
  <div ref="container">
    <a-modal
      :title="title"
      :width="800"
      :visible="visible"
      :confirmLoading="confirmLoading"
      :getContainer="() => $refs.container"
      :maskStyle="{ top: '93px', left: '154px' }"
      :wrapClassName="wrapClassNameInfo()"
      :mask="isDesktop()"
      :maskClosable="false"
      @ok="handleOk"
      @cancel="handleCancel"
      cancelText="关闭"
      style="top: 15%; height: 45%"
    >
      <template slot="footer">
        <a-button key="back" v-if="isReadOnly" @click="handleCancel"> 关闭 </a-button>
      </template>
      <a-spin :spinning="confirmLoading">
        <a-form :form="form" id="logisticsModal">
          <!-- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="快递名称">
            <a-input
              placeholder="请输入快递名称"
              v-decorator.trim="['name', validatorRules.name]"
              :disabled="isDisabled"
            />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="快递单号">
            <a-input
              placeholder="请输入快递单号"
              v-decorator.trim="['number', validatorRules.number]"
              :disabled="isDisabled"
            />
          </a-form-item> -->
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="物流图片信息">
            <j-image-upload v-model="fileList" bizPath="material" text="上传" isMultiple></j-image-upload>
          </a-form-item>
        </a-form>
      </a-spin>
    </a-modal>
  </div>
</template>
<script>
import pick from 'lodash.pick'
import { setLogisticsInformation } from '@/api/api'
import { autoJumpNextInput } from '@/utils/util'
import { mixinDevice } from '@/utils/mixin'
import JImageUpload from '@/components/jeecg/JImageUpload'
export default {
  name: 'logisticsModal',
  mixins: [mixinDevice],
  components: {
    JImageUpload,
  },
  data() {
    return {
      title: '操作',
      visible: false,
      model: {},
      isReadOnly: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        // name: {
        //   rules: [{ required: true, message: '请输入快递名称!' }],
        // },
        // number: {
        //   rules: [{ required: true, message: '请输入快递单号!' }],
        // },
      },
      isDisabled: false,
      fileList: [],
    }
  },
  created() {},
  methods: {
    add(record) {
      this.edit(record)
    },
    edit(record) {
      this.fileList = []
      this.form.resetFields()
      if (record.logisticsInformation) {
        // this.isDisabled = true
        this.model = Object.assign({}, JSON.parse(record.logisticsInformation))
        this.fileList = this.model.imgName
      } else {
        this.model = Object.assign({}, { headNumber: record.number, name: '', number: '', imgName: '' })
      }
      this.$nextTick(() => {
        this.visible = true
        this.form.setFieldsValue(pick(this.model, 'name', 'number', 'headNumber'))
        autoJumpNextInput('logisticsModal')
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      // return

      const that = this

      // if (that.isDisabled) {
      //   that.close()
      //   return
      // }

      // 触发表单验证
      // this.form.validateFields((err, values) => {
      //   if (!err) {
      //     that.confirmLoading = true
      //     let formData = Object.assign(this.model, values)
      //     setLogisticsInformation(formData)
      //       .then((res) => {
      //         if (res.code === 200) {
      //           that.$emit('ok')
      //         } else {
      //           that.$message.warning(res.msg)
      //         }
      //       })
      //       .finally(() => {
      //         that.confirmLoading = false
      //         that.close()
      //       })
      //   }
      // })

      if (that.fileList && that.fileList.length > 0) {
        let formData = {
          headNumber: this.model.headNumber,
          imgName: that.fileList,
        }

        console.log(formData)

        setLogisticsInformation(formData)
          .then((res) => {
            if (res.code === 200) {
              that.$emit('ok')
            } else {
              that.$message.warning(res.msg)
            }
          })
          .finally(() => {
            that.confirmLoading = false
            that.close()
          })
      } else {
        that.$message.warning('请上传图片')
      }
    },
    handleCancel() {
      this.close()
    },
  },
}
</script>
<style scoped>
</style>